const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
const px2rem = require('postcss-px2rem')
// const CompressionPlugin = require("compression-webpack-plugin")
const CompressionWebpackPlugin = require('compression-webpack-plugin');

const postcss = px2rem({
    remUnit: 16   //基准大小 baseSize，需要和rem.js中相同
})

// //配置请求转发的代理
// //定义代理的对象
// let proxyObj = {};
//
// //拦截http请求
// proxyObj['/'] = {
//     ws: false,  //关掉websocket
//     target: 'http://localhost:7070',//目标转发的地址
//     changeOrigin: true,
//     pathRewrite:{  //请求地址重写
//         '^/': ''  //拦截到的地址不去修改它
//     }
// }


module.exports ={
    //基本路径  ---这个千万不能省，不然你的静态资源找不到
    publicPath: "./",
    //输出文件目录
    outputDir: "dist",
    //代理
    devServer:{  //配置开发环境
        // host: 'localhost',
        host:'0.0.0.0',
        port:8082,
        open: true, //配置游览器自动访问
        // proxy: proxyObj  //代理对象
    },

    //配置cdn引入vue和elementui
    // configureWebpack 值为对象，会通过 webpack-merge 合并到最终的配置
    configureWebpack: {
        externals: {
            // CDN 的 Element 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
            'vue': 'Vue',
            // 属性名称 element-ui, 表示遇到 import xxx from 'element-ui' 这类引入 'element-ui'的，
            // 不去 node_modules 中找，而是去找 全局变量 ELEMENT
            'vue-router': 'VueRouter',
            'element-ui': 'ELEMENT',
            'axios': 'axios',
            'muse-ui':'Muse-UI',
            'vuex': 'Vuex',
        }
    },

    css: {
        loaderOptions: {
            css: {},
            postcss: {
                plugins: [
                    // 补全css前缀(解决兼容性)
                    require("autoprefixer")(),
                    // 把px单位换算成rem单位
                    require("postcss-pxtorem")({
                        rootValue: 37.5, // 换算的基数37.5
                        selectorBlackList: [".el-menu-demo", ".el-menu", ".el-menu--horizont",
                            ".el-input",".el-input--small",".el-input--prefix",".el-input--suffix","logo",
                            ".el-pagination",".is-background",".btn-next",".el-pager",".number",".active",
                            "h4",".el-card",".el-divider--horizontal",".el-card__body",".box-card",".is-always-shadow",
                            ".el-backtop",".el-button",".el-button--success",".is-plain",".link_message",
                            ".el-icon-search",".el-input__icon",".el-input__inner",".el-col",".el-col-17"
                        ], // 要忽略的选择器并保留为px。
                        propList: ["*"], //可以从px更改为rem的属性。
                        minPixelValue: 2 // 设置要替换的最小像素值。
                    }),
                ]
            }
        }
    },

    productionSourceMap: false,// 设为false，既可以减少包大小，也可以加密源码
    // transpileDependencies: ['element-ui'],//指定某个库在打包的时候需要编译
    chainWebpack(config) {
        config.plugins.delete('prefetch');//默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能模块
        if (process.env.NODE_ENV !== 'development') {
            // 对超过10kb的文件gzip压缩
            config.plugin('compressionPlugin').use(
                new CompressionWebpackPlugin({
                    test: /\.(js|css|html)$/,// 匹配文件名
                    threshold: 10240,
                })
            );
        }
    }

};

